// components/Sidebar.tsx
import pzglIcon from '@/assets/pzgl.png';
import { Button, Typography } from 'antd';
import styles from './index.less';

const { Title, Text } = Typography;

interface Tprops {
  onRecord: () => void;
  onNewChat: () => void;
  onClick: (item: any) => void;
  isExpanded: boolean;
  sationList: any[];
}

const Sidebar = (props: Tprops) => {
  const { onRecord, onNewChat, sationList, isExpanded, onClick } = props;
  const handleRecord = () => {
    if (isExpanded) return;
    onRecord();
  };

  const handleNewChat = () => {
    onNewChat();
  };

  const handleClick = (item: any) => {
    onClick(item);
  };

  return (
    <div className={styles.sidebar}>
      <Button
        type="primary"
        className={styles.newChatButton}
        disabled={isExpanded}
        onClick={handleNewChat}
      >
        新建对话
      </Button>

      <div className={styles.chatList}>
        <span className={styles.time}>最近7天</span>
        {sationList
          .filter((item) => item.dateRange === 0)
          .map((item: any, index: number) => (
            <div
              className={styles.log}
              key={index}
              onClick={() => handleClick(item)}
            >
              {item.description}
            </div>
          ))}
        <span className={styles.time}>最近30天</span>
        {sationList
          .filter((item) => item.dateRange === 1)
          .map((item: any, index: number) => (
            <div
              className={styles.log}
              key={index}
              onClick={() => handleClick(item)}
            >
              {item.description}
            </div>
          ))}
        <span className={styles.time}>最近半年</span>
        {sationList
          .filter((item) => item.dateRange === 2)
          .map((item: any, index: number) => (
            <div
              className={styles.log}
              key={index}
              onClick={() => handleClick(item)}
            >
              {item.description}
            </div>
          ))}
      </div>

      <div
        className={`${styles.manageButton} ${
          isExpanded ? styles.disabled : ''
        }`}
        onClick={handleRecord}
      >
        <img className={styles.icon} src={pzglIcon} />
        <span>管理对话记录</span>
      </div>
    </div>
  );
};

export default Sidebar;
